<template>
  <div class="container">
    <div style="display: flex;justify-content: space-between">
      <div>
        <el-form :inline="true" :model="formData" size="mini">
          <el-form-item label="名称">
            <el-input v-model="formData.name" placeholder="请输入名称"></el-input>
          </el-form-item>
          <el-form-item label="年级">
            <el-select v-model="formData.region" placeholder="请选择年级">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="班号">
            <el-input v-model="formData.name" placeholder="请输入班号"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <el-form :inline="true" :model="formData" size="mini">
          <el-form-item>
            <el-button size="mini" type="success" @click="handleUpdate('add')">新增</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <el-table
      border
      :data="tableData"
      style="width: 100%">
      <el-table-column
        label="序号"
        width="90"
        type="index"
        :index="indexMethod">
      </el-table-column>
      <template v-for="(item,index) in columns">
        <el-table-column
          :key=index
          :label="item.label">
          <template #default="scope">
            <span>{{ scope.row[item.props] }}</span>
          </template>
        </el-table-column>
      </template>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button
            size="mini"
            @click="handleUpdate('edit',scope.$index, scope.row)">编辑
          </el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.currentPage"
        :page-sizes="[5, 10, 20, 50]"
        :page-size=pagination.pageSize
        layout="total, sizes, prev, pager, next, jumper"
        :total="this.tableData.length">
      </el-pagination>
    </div>
    <update-view
      v-if="updateVisible"
      :updateVisible="updateVisible"
      :updateData="updateData"
      :type="updateType"
      @cancel="cancelUpdateHandle"
    ></update-view>
  </div>
</template>

<script>
import UpdateView from '@/views/posts/list/UpdateView.vue'
import { getPostsList } from '@/api/posts'

export default {
  name: 'ListView',
  components: {
    UpdateView
  },
  data () {
    return {
      formData: {
        user: '',
        region: ''
      },
      columns: [
        {
          props: 'title',
          label: '标题'
        },
        {
          props: 'body',
          label: '正文'
        }],
      tableData: [],
      pagination: {
        currentPage: 1,
        pageSize: 10
      },
      updateVisible: false,
      updateData: {},
      updateType: 'add'
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      getPostsList()
        .then(res => {
          if (res.status !== 200) {
            this.$message.error('error')
            return
          }
          this.tableData = res.data
        })
    },
    onSubmit () {
      console.log('submit!')
    },
    indexMethod (index) {
      return ++index
    },
    handleUpdate (type, index, data) {
      this.updateType = type
      if (type === 'edit') {
        // 传递数据给子组件
        this.updateData = data
      }
      this.updateVisible = true
    },
    handleDelete (index, row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
    },
    handleCloseEdit () {
      this.editVisible = false
    },
    cancelUpdateHandle () {
      this.updateVisible = false
    }
  }
}
</script>

<style scoped>
.container {
}

.pagination {
  display: flex;
  margin-top: 15px;
  flex-direction: row-reverse;
}
</style>
